<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.all{
				width: 400px;
				height: 400px;
				border: 1px solid #000;
				box-sizing: border-box;
				margin: 100px auto;
				position: relative;
			}
			.top{
				width: 400px;
				height: 200px;
				background-color: gray;
				border-top-left-radius: 200px;
				border-top-right-radius: 200px;
			}
			
			.bottom{
				width: 400px;
				height: 200px;
				background-color: black;
				border-bottom-left-radius: 200px;
				border-bottom-right-radius: 200px;
			
			}
			.left{
				width: 200px;
				height: 200px;
				background-color: gray;
				border: 80px solid black;
				box-sizing: border-box;
					border-radius: 50%;
					position: absolute;
					left: 0;
					top: 100px;
			}
			
			.right{
				width: 200px;
				height: 200px;
				background-color: black;
				border: 80px solid gray;
					box-sizing: border-box;
					border-radius: 50%;
					
					position: absolute;
					right: 0;
					top: 100px;
			}
			
		</style>
	</head>
	<body>
		<div class="all">
			<!-- 上面的半圆 -->
			<div class="top"></div>
			<!-- 下面的半圆 -->
			<div class="bottom"></div>
			<!-- 左边的小圆 -->
			<div class="left"></div>
			<!-- 右边的小圆 -->
			<div class="right"></div>
		</div>
		
	</body>
</html>